<template>
  <div class="mod-config" v-loading="dataListLoading">
    <el-divider>今日推荐壁纸管理</el-divider>
    <p style="text-align: center; margin: 20px 0 20px">[我在人间贩卖黄昏,只为收集世间温柔去见你]</p>
    <div style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="selectedData"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['所有数据', '已选数据']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        @change="handleChange"
        :data="tableData">
        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
        <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
      </el-transfer>
      <div class="modal-footer text-center">
        <el-button type="primary" @click="updateHandler()">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'album-product-wallpaper',
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 6; i++) {
        data.push({
          key: i,
          label: `备选项 ${ i }`,
          disabled: i % 3 === 0
        });
      }
      return data;
    };
    return {
      tableData: generateData(),
      selectedData: [],
      //真实数据：
      dataList: [],
      pageIndex: 1,
      pageSize: 1000,
      totalPage: 0,
      dataListLoading: false,
    };
  },
  activated () {
    this.getDataList()
    this.getSelectedDataList()
  },

  methods: {
    init (id) {
      console.log("recommend-wallpaper:" + id)
      this.getDataList()
      this.getSelectedDataList()
    },
    // 获取主题数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/sys/recommend/wallpaperList'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          const newData = [];
          this.dataList.forEach((item)=>{
            newData.push({
              key: item.id,
              label: item.name,
              disabled: false
            });
          });
          this.tableData = newData
        } else {
          this.dataList = []
        }
        this.dataListLoading = false
      })
    },
    // 获取主题数据列表
    getSelectedDataList () {
      this.$http({
        url: this.$http.adornUrl('/sys/recommend/selectedList'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'type': 3,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          const dataListTemp = data.page.list
          const selectedDataTemp = [];
          dataListTemp.forEach((item)=>{
            selectedDataTemp.push(item.objectId);
          });
          this.selectedData = selectedDataTemp
        }
      })
    },
    handleChange(value, direction, movedKeys) {
      console.log("method:handleChange;");
      console.log(value, direction, movedKeys);
    },
    updateHandler() {
      console.log("method:updateHandler;");
      this.$confirm(`确定要修改今日推荐操作吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/recommend/update'),
          method: 'post',
          data: this.$http.adornData(this.selectedData, false),
          params: this.$http.adornParams({
            'type': 3
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
                this.getSelectedDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
  }
};
</script>

<style>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
.el-transfer-panel{
  width:350px!important;
  height:500px!important;
}
.el-transfer-panel__list.is-filterable{
  height: 400px;
}
</style>
